<template>
	<view class="container">
		<u-top-tips ref="uTips"></u-top-tips>
		<Steps :stepIndex="1"></Steps>
		<u-form :model="addMerForm" :rules="merFormRules" ref="merFormRef" label-width="5rem">
			<u-form-item label-position="left" label="开户许可证" prop="opening_account" label-width="150" v-if="merType==1||merType==2||merType==6">
				<u-upload :show-progress="false" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" max-count="1"
				 width="160" height="160" @on-choose-complete="upLoadBefore" @on-success="kaihuxukeUpSuccess" @on-error="upLoadImgError"></u-upload>
			</u-form-item>
			<u-form-item label-position="left" label="结算卡" prop="bank_card" label-width="150" v-if="merType==3">
				<u-upload :show-progress="false" action="http://openpay.duolaibei.com/admin/upload/upload" name="image" max-count="1"
				 width="160" height="160" @on-choose-complete="upLoadBefore" @on-success="jiesuankaUpSuccess" @on-error="upLoadImgError"></u-upload>
			</u-form-item>
			<u-form-item label="开户银行" prop="bank_name">
				<u-input v-model="addMerForm.bank_name" />
			</u-form-item>
			<u-form-item label="开户名" prop="account_name">
				<u-input v-model="addMerForm.account_name" />
			</u-form-item>
			<u-form-item label="开户账号" prop="account_no">
				<u-input v-model="addMerForm.account_no" />
			</u-form-item>
			<u-form-item label="结算卡联行号" prop="bank_code">
				<u-input v-model="addMerForm.bank_code" />
			</u-form-item>
			<u-form-item label-position="left" label="结算卡类型 " prop="settle_bank_type">
				<u-radio-group v-model="addMerForm.settle_bank_type" @change="radioGroupChange" width="auto" :wrap="false">
					<u-radio shape="circle" v-for="(item, index) in sltBankTypeList" :key="index" :name="item.name">{{ item.name }}</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label-position="left" label="入账标识" prop="settle_type">
				<u-radio-group v-model="addMerForm.settle_type" @change="radioGroupChange" width="auto" :wrap="false">
					<u-radio shape="circle" v-for="(item, index) in bookedTypeList" :key="index" :name="item.name">{{ item.name }}</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label-position="left" :show-progress="false" label="结算人身份证正面" prop="front_settlement_card" label-width="150"
			 v-if="merType==3||merType==4||merType==5||addMerForm.settle_type=='非法人入账'">
				<u-upload :show-progress="false"  action="http://openpay.duolaibei.com/admin/upload/upload" name="image" max-count="1" width="160" height="160"
				 @on-choose-complete="upLoadBefore" @on-success="jiesuanrenTopUpSuccess" @on-error="upLoadImgError"></u-upload>
			</u-form-item>
			<u-form-item label-position="left" :show-progress="false" label="结算人身份证反面" prop="back_settlement_card" label-width="150"
			 v-if="merType==3||merType==4||merType==5||addMerForm.settle_type=='非法人入账'">
				<u-upload :show-progress="false"  action="http://openpay.duolaibei.com/admin/upload/upload" name="image" max-count="1" width="160" height="160"
				 @on-choose-complete="upLoadBefore" @on-success="jiesuanrenDownUpSuccess" @on-error="upLoadImgError"></u-upload>
			</u-form-item>
			<u-form-item  label-position="left" label="手持身份证照" prop="handheld_card" label-width="150" v-if="merType==3||merType==4||merType==5||addMerForm.settle_type=='非法人入账'">
				<u-upload :show-progress="false"  action="http://openpay.duolaibei.com/admin/upload/upload" name="image"
				 max-count="1" width="160" height="160" @on-success="shouchiCardUpSuccess" @on-error="upLoadImgError"></u-upload>
			</u-form-item>
			<u-form-item  label-position="left" label="手持银行卡照" prop="handheld_bank" label-width="150" v-if="merType==3||merType==4||merType==5||addMerForm.settle_type=='非法人入账'">
				<u-upload :show-progress="false"  action="http://openpay.duolaibei.com/admin/upload/upload" name="image"
				 max-count="1" width="160" height="160" @on-success="shouchiBankUpSuccess" @on-error="upLoadImgError"></u-upload>
			</u-form-item>
<!-- 			<u-form-item label-position="left" label="经营类别" prop="merchant_category">
				<u-input :border="false" type="select" :select-open="busTypeShow" v-model="addMerForm.merchant_category"
				 placeholder="请选择经营类别" @click="busTypeShow = true"></u-input>
			</u-form-item>
			<u-form-item label-position="left" label="行业类型编码" prop="industry_type_code">
				<u-input :border="false" type="select" :select-open="indTypeShow" v-model="addMerForm.industry_type_code"
				 placeholder="请选择经营类别" @click="indTypeShow = true"></u-input>
			</u-form-item> -->
			<u-form-item label="商户费率" prop="service_rate">
				<u-input v-model="addMerForm.service_rate" />
			</u-form-item>
			<u-form-item label-position="left" label="结算类型" prop="settlementPeriod">
				<u-radio-group v-model="addMerForm.settlementPeriod" @change="radioGroupChange" width="auto" :wrap="false">
					<u-radio shape="circle" v-for="(item, index) in sltTypeList" :key="index" :name="item.name">{{ item.name }}</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form>
		<view class="btns-area">
			<u-button @click="addMer" type="warning" :plain="true">下一步</u-button>
		</view>
		<u-select mode="single-column" :list="busTypeList" v-model="busTypeShow" @confirm="selectBusTypeConfirm"></u-select>
		<u-select mode="single-column" :list="indTypeList" v-model="indTypeShow" @confirm="selectIndTypeConfirm"></u-select>
	</view>
</template>

<script>
	import Steps from '@/components/steps/index.vue';
	export default {
		components: {
			Steps
		},
		data() {
			return {
				fileList: [],
				merType: 0,
				addMerForm: {
					// 需要上传回显的数据要提前写好
					settlementPeriod: 'D1',
					imgObj:{}
				},
				// 结算类型选择
				sltTypeList: [{
					name: 'T1',
					disabled: false,
					value: 'T1'
				}, 
				{
					name: 'D1',
					disabled: false,
					value: 'D1'
				},
				{
					name: 'D0',
					disabled: false,
					value: 'D0'
				},
				],
				// 结算卡类型选择
				sltBankTypeList: [{
						name: '对公',
						value: 1
					},
					{
						name: '对私',
						value: 2
					},
				],
				// 入账标识
				bookedTypeList: [{
						name: '法人入账',
						value: 1
					},
					{
						name: '非法人入账',
						value: 2
					},
				],
				// 经营类型选框显隐
				busTypeShow: false,
				// 经营类型选择
				busTypeList: [],
				// 行业类型选框显隐
				indTypeShow: false,
				// 行业类型选择
				indTypeList: [],

				// 语法校验
				merFormRules: {
					handheld_card: [{
						required: true,
						message: '请上传手持身份证照',
						validator: (rule, value, callback) => {
							if (this.addMerForm.imgObj.handheld_card == undefined) {
								return false
							}
							return true
						}
					}, ],
					handheld_bank: [{
						required: true,
						message: '请上传手持银行卡照',
						validator: (rule, value, callback) => {
							if (this.addMerForm.imgObj.handheld_bank == undefined) {
								return false
							}
							return true
						}
					}, ],
					opening_account: [{
						required: true,
						message: '请上传开户许可证',
						validator: (rule, value, callback) => {
							if (this.addMerForm.imgObj.opening_account == undefined) {
								return false
							}
							return true
						}
					}, ],
					front_settlement_card: [{
						required: true,
						message: '请上传结算人身份证正面',
						validator: (rule, value, callback) => {
							if (this.addMerForm.imgObj.front_settlement_card == undefined) {
								return false
							}
							return true
						}
					}, ],
					back_settlement_card: [{
						required: true,
						message: '请上传结算人身份证反面',
						validator: (rule, value, callback) => {
							if (this.addMerForm.imgObj.back_settlement_card == undefined) {
								return false
							}
							return true
						}
					}, ],
					bank_code: [{
						required: true,
						message: '请输入结算卡联行号',
						trigger: 'blur',
					}, ],
					bank_name: [{
						required: true,
						message: '请输入开户银行',
						trigger: 'blur',
					}, ],
					account_name: [{
						required: true,
						message: '请输入开户名',
						trigger: 'blur',
					}, ],
					account_no: [{
						required: true,
						message: '请输入开户账号',
						trigger: 'blur',
					}, ],
					settle_type:[{
						required: true,
						message: '请选择入账标识',
						trigger: 'change',
					}],
					settle_bank_type: [{
						required: true,
						message: '请选择结算卡类型',
						trigger: 'change',
					}, ],
					// merchant_category: [{
					// 	required: true,
					// 	message: '请输入经营类别',
					// 	trigger: 'blur',
					// }, ],
					// industry_type_code: [{
					// 	required: true,
					// 	message: '请输入行业类型编码',
					// 	trigger: 'blur',
					// }, ],
					service_rate: [{
						required: true,
						message: '请输入商户费率',
						trigger: 'blur',
					}, ],
					settlementPeriod: [{
						required: true,
						message: '请选择结算类型',
						trigger: 'change',
					}, ],
				}
			}
		},
		onLoad(options) {
			this.merType = options.type;
			// 获取行业类型和经营类别
			this.getBusTypeList();
			this.getIndTypeList();
		},
		onReady() {
			this.$refs.merFormRef.setRules(this.merFormRules);
		},
		methods: {
			upLoadBefore() {
				uni.showLoading({
					title: '努力上传中',
					mask: true
				});
			},
			// 单选框 选择发生变化
			radioGroupChange(e) {},
			kaihuxukeUpSuccess(data, index, lists, name) {
				let con = data.content;
				this.addMerForm.imgObj.opening_account = con.path;
				uni.hideLoading();
			},
			jiesuankaUpSuccess(data, index, lists, name) {
				let con = data.content;
				this.addMerForm.imgObj.bank_card = con.path;
				uni.hideLoading();
			},
			jiesuanrenTopUpSuccess(data, index, lists, name) {
				let con = data.content;
				this.addMerForm.imgObj.front_settlement_card = con.path;
				uni.hideLoading();
			},
			jiesuanrenDownUpSuccess(data, index, lists, name) {
				let con = data.content;
				this.addMerForm.imgObj.back_settlement_card = con.path;
				uni.hideLoading();
			},
			shouchiCardUpSuccess(data, index, lists, name){
				let con=data.content;
				this.addMerForm.imgObj.handheld_card=con.path;
				uni.hideLoading();
			},
			shouchiBankUpSuccess(data, index, lists, name){
				let con=data.content;
				this.addMerForm.imgObj.handheld_bank=con.path;
				uni.hideLoading();
			},
			selectBusTypeConfirm(e) {
				let that = this;
				this.addMerForm.merchant_category = '';
				e.map((val, index) => {
					that.addMerForm.merchant_category = val.label;
				});
			},
			selectIndTypeConfirm(e) {
				let that = this;
				this.addMerForm.industry_type_code = '';
				e.map((val, index) => {
					that.addMerForm.industry_type_code = val.label;
				});
			},
			// 添加商户
			addMer() {
				let that = this,
					form = this.addMerForm;
				this.$refs.merFormRef.validate(valid => {
					if (valid) {
						form.settle_bank_type=that.$myApi.labelFindVal(that.sltBankTypeList,form.settle_bank_type);
						form.settle_type=that.$myApi.labelFindVal(that.bookedTypeList,form.settle_type);
						uni.setStorageSync('addFormB',JSON.stringify(form));
						uni.navigateTo({
							url:`add-cmt?type=${that.merType}`,
						})
						
					} else {
						uni.showToast({
							title:'请填写完整',
							icon:'none',
							duration:2000
						});
					}
				});
			},
			getBusTypeList() {
				let that = this;
				this.$request.httpTokenRequest({
					url: '/admin/conf/getCategory',
					method: 'POST',
					data: {
						type: 0
					},
					needToken: false,
				}).then(res => {
					if (res.data.code == 200) {
						that.busTypeList = res.data.content;
					}
				}, error => {
					console.log(error);
				});
			},
			getIndTypeList() {
				let that = this;
				this.$request.httpTokenRequest({
					url: '/admin/conf/getIndustry',
					method: 'POST',
					data: {
						type: 0
					},
					needToken: false,
				}).then(res => {
					if (res.data.code == 200) {
						that.indTypeList = res.data.content;
					}
				}, error => {
					console.log(error);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 96%;
		margin: 0 auto;
		padding-bottom: 2rem;

		.btns-area {
			margin-top: 2rem;
		}
	}
</style>
